/*
 * @Descripttion: $0
 * @version: 
 * @Author: linPing
 * @Date: 2019-10-29 01:26:12
 * @LastEditTime: 2019-11-01 14:06:04
 */
import React from 'react';
import { TouchableOpacity, StyleSheet, View, Text , ActivityIndicator,} from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'

export default class ViewUtil {



    /**
    * 获取自定义的item
    * @param callBack 单击item的回调
    * @param text 显示的文本
    * @param Icons:Component 左侧图标
    * @param expandableIco 右侧图标
    * @return {XML}
    */

   static getCustomItem(callBack, text, expandableIco, iconSize, color = "#333", Icons) {
        return (
            <TouchableOpacity
                onPress={callBack}
                style={styles.setting_item_container}
            >
                <View style={{ alignItems: 'center', flexDirection: 'row' }}>
                    {Icons ?
                        { Icons } :
                        <View style={{ opacity: 1, width: 0, height: 8, marginRight: 10, }} />
                    }
                    <Text>{text}</Text>
                </View>
                <Ionicons
                    name={expandableIco ? expandableIco : 'ios-arrow-forward'}
                    size={iconSize || 16}
                    style={{
                        marginRight: 10,
                        alignSelf: 'center',
                        color: color || 'black',
                    }} />
            </TouchableOpacity>
        )

    }


    /*
     *@Description: 生成FlatList的底部Loading
     *@param: hide //是否隐藏
     *@param: loadMore //是否还有更多数据
     *@return: 
    */

    static _genIndicator(hide,loadMore) {

        if (hide) return null
        return loadMore ?
            <View style={styles.indicatorWarp}>
                <ActivityIndicator
                    size={'large'}
                    animating={true}
                />
                <Text style={styles.indicatorText}>正在加载</Text>
            </View> : <Text style={{ color: "#999", fontSize: 12, marginVertical: 10, textAlign: 'center' }}> 没有更多数据了 </Text>


    }

    /**
     * 获取设置页的Item
     * @param callBack 单击item的回调
     * @param text 显示的文本
     * @param color 图标着色
     * @param Icons react-native-vector-icons组件
     * @param icon 左侧图标
     * @param expandableIco 右侧图标
     * @return {XML}
     */
    static getSettingItem(callBack, text, color, Icons, icon, expandableIco) {
        return (
            <TouchableOpacity
                onPress={callBack}
                style={styles.setting_item_container}
            >
                <View style={{ alignItems: 'center', flexDirection: 'row' }}>
                    {Icons && icon ?
                        <Icons
                            name={icon}
                            size={16}
                            style={{ color: color, marginRight: 10 }}
                        /> :
                        <View style={{ opacity: 1, width: 16, height: 16, marginRight: 10, }} />
                    }
                    <Text>{text}</Text>
                </View>
                <Ionicons
                    name={expandableIco ? expandableIco : 'ios-arrow-forward'}
                    size={16}
                    style={{
                        marginRight: 10,
                        alignSelf: 'center',
                        color: color || 'black',
                    }} />
            </TouchableOpacity>
        )
    }

    /**
     * 获取设置页的Item
     * @param callBack 单击item的回调
     * @param menu @MORE_MENU
     * @param color 图标着色
     * @param expandableIco 右侧图标
     * @return {XML}
     */
    static getMenuItem(callBack, menu, color, expandableIco) {
        return ViewUtil.getSettingItem(callBack, menu.name, color, menu.Icons, menu.icon, expandableIco)
    }

    /**
     * 获取左侧返回按钮
     * @param callBack
     * @returns {XML}
     */
    static getLeftBackButton(callBack) {
        return <TouchableOpacity
            style={{ padding: 8, paddingLeft: 16,paddingRight:18 }}
            onPress={callBack}>
            <Ionicons
                name={'ios-arrow-back'}
                size={26}
                style={{ color: 'white' }} />
        </TouchableOpacity>
    }
    /**
     * 获取右侧文字按钮
     * @param title
     * @param callBack
     * @returns {XML}
     */
    static getRightButton(title, callBack) {
        return <TouchableOpacity
            style={{ alignItems: 'center', }}
            onPress={callBack}>
            <Text style={{ fontSize: 18, color: '#FFFFFF', padding:18, }}>{title}</Text>
        </TouchableOpacity>
    }
    /**
     * 获取分享按钮
     * @param callBack
     * @returns {XML}
     */
    static getShareButton(callBack) {
        return <TouchableOpacity
            underlayColor={'transparent'}
            onPress={callBack}
        >
            <Ionicons
                name={'md-share'}
                size={20}
                style={{ opacity: 0.9, marginRight: 10, color: 'white' }} />
        </TouchableOpacity>
    }

}
const styles = StyleSheet.create({
    setting_item_container: {
        backgroundColor: 'white',
        padding: 10, height: 60,
        alignItems: 'center',
        justifyContent: 'space-between',
        flexDirection: 'row'
    },
    indicatorWarp: {
        marginTop: 10,
        alignItems: 'center'
    },
    indicatorText: {
        margin: 10
    }
});